<script setup>
const props = defineProps({
    selectedTransmitter: Object,
});
</script>

<template>
    <el-card shadow="hover" class="card">
        <el-row>
            <!-- ix: 遥控/本控状态 -->
            <el-col :span="7" class="state-box">
                <div class="state-item green-bg">遥控</div>
                <div class="state-item">本控</div>
            </el-col>
            <!-- x: 功率等级状态 -->
            <el-col :span="9" class="state-box">
                <div class="state-item green-bg">全功率</div>
                <div class="state-item">中功率</div>
                <div class="state-item">小功率</div>
            </el-col>
            <!-- xi: PA开/关状态 -->
            <el-col :span="8" class="state-box">
                <div class="state-item green-bg">高压</div>
            </el-col>
        </el-row>
    </el-card>
</template>

<style scoped>
.card {
    height: 100%;
}

.card .state-box {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-border-color);
}

.card .state-item {
    flex-grow: 1;
    text-align: center;
    padding: 10px 0;
}

.card .green-bg {
    background-color: #67c23a;
}
</style>